<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">销售管理</el-breadcrumb-item>
      <el-breadcrumb-item>销售单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <div style="float: right;position: relative;margin-bottom: 20px">
      <el-input placeholder="请输入客户名称" v-model="name">
        <el-button slot="append" icon="el-icon-search" @click="customerSearch(name)" style="color: #0095d7">
          搜索
        </el-button>
      </el-input>
    </div>

    <el-table
        :data="salesArr"
        style="width: 100%;margin:0 20px 20px 20px" border>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="salesNumber" label="销售单号" align="center"></el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="productId" label="商品编号" align="center"></el-table-column>
      <el-table-column prop="salesPrice" label="售价" align-h="center"></el-table-column>
      <el-table-column prop="count" label="数量" align="center"></el-table-column>
      <el-table-column prop="customerName" label="客户" align="center"></el-table-column>
      <el-table-column prop="userName" label="业务员" align="center"></el-table-column>
      <el-table-column width="120" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit"
                     circle size="mini" @click="handleEdit(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete"
                     circle size="mini" @click="openDeleteConfirm(scope.row)" ></el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>

export default {
  data() {
    return {
      salesArr: [],
      name:'',
      ruleForm:{
        id:'',
        name:'',
        address:'',
        contact:'',
        phone:'',
        description:''
      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    submitEdit() {
      let url = 'http://localhost:8080/customers/' + this.ruleForm.id +'/update';
      console.log('url = ' + url);
      let formData = this.qs.stringify(this.ruleForm);
      console.log('formData = ' + formData);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '修改客户成功！',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.loadCustomerList();
        } else if (responseBody.state == 40900) {
          this.$message.error(responseBody.message);
        } else {
          this.$message.error(responseBody.message);
          this.dialogFormVisible = false;
          this.loadCustomerList();
        }
      });
    },
    customerInsert(){
      location.href='/sys-sales/temp/customer/add-new';
    },
    handleEdit(customer) {
      let message = '您正在尝试编辑【' + customer.id + '-' + customer.name + '】的相册详情，抱歉，该功能尚未实现……';
      console.log(message);
      let url = 'http://localhost:8080/customers/'+customer.id+'/getStandardById';
      console.log(url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000){
          this.ruleForm = responseBody.data;
          this.dialogFormVisible = true;
        }else {
          this.$message.error(responseBody.message);
          this.loadCustomerList();
        }
      });
    },
    handleDelete(customer){
      let url = 'http://localhost:8080/customers/'+customer.id+'/delete';
      console.log('url = '+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=>{
        let responseBody = response.data;
        if (responseBody.state !== 20000){

          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 20000){
          this.$message({
            message: '恭喜你，删除成功',
            type: 'success'
          });
        }
        this.loadCustomerList();
      })
    },
    customerSearch(name) {
      if (this.name == '') {
        this.$message.error("用户名不能为空");
        return;
      }
      let url = 'http://localhost:8080/customers/getStandardCustomer?name=' + this.name;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        this.customerArr = response.data.data;
      })
    },
    allCustomer(){
      this.loadCustomerList();
    },
    openDeleteConfirm(album){
      let message = '此操作将永久删除['+album.name+']该相册, 是否继续?';
      this.$confirm(message, '提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(album);
      }).catch(() => {

      });
    },
    loadSalesOrderList(){
      let url = 'http://localhost:8080/sales/selectSalesOrderList';
      console.log('url = '+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        let responseBody = response.data;
        this.salesArr = responseBody.data;
      })
    }
  },
  mounted() {
    this.loadSalesOrderList();
  }
}
</script>